<template>
  <div>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        销售订单的发起
      </el-col>
    </el-row>
  </div>

  <el-form ref="quoteForm"  >
    <!-- 报价单基本信息板块 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>销售订单基本信息</span>
      </div>
      <el-row :gutter="20">
           <el-col :span="8">
             <el-form-item label="选择对应的客户" >
               <el-select
                   v-model="SalOrder.customerId"
                   placeholder="请选择客户"
                   @visible-change="fetchCustomer">
                 <el-option
                     v-for="customer in customers"
                     :key="customer.id"
                     :label="customer.name"
                     :value="customer.id"
                 ></el-option>
               </el-select>
             </el-form-item>
           </el-col>

        <el-col :span="8">
          <el-form-item label="送货地址">
            <el-input v-model="SalOrder.shippingAddress" placeholder="请输入送货地址"></el-input>
          </el-form-item>
        </el-col>
      </el-row>


    </el-card>

    <!-- 商品信息板块 -->
    <el-card class="box-card" v-for="(product, index) in SalOrder.orderDetailList" :key="index">
      <div slot="header" class="clearfix">
        <span>商品信息 {{ index + 1 }}</span>
        <el-button style="float: right; padding: 3px 0" type="text" v-if="index === 0" @click="addProduct">添加商品</el-button>
        <el-button style="float: right; padding: 3px 0; margin-right: 10px" type="text" v-if="index !== 0" @click="removeProduct(index)">删除</el-button>
      </div>

      <el-form-item label="选择对应的商品">
        <el-select
            v-model="product.variantId"
            placeholder="请选择商品"
            @visible-change="getVariants"
        >
          <el-option
              v-for="variant in variants"
              :key="variant.id"
              :label="variant.name"
              :value="variant.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品售价">
        <el-input v-model="product.price"></el-input>
      </el-form-item>
      <el-form-item label="最大销售数量">
        <el-input-number v-model="product.total" :min="1"></el-input-number>
      </el-form-item>
    </el-card>

    <!-- 提交按钮 -->
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交报价单</el-button>
    </el-form-item>
  </el-form>
  </div>
</template>

<script setup >
import {ref} from "vue";
import {addOrder} from "../../../api/sale/order";
import {getCustomer} from "@/api/sale/customer";
import {getVariant} from "../../../api/sale/prodect";
import { getUser} from "../../../api/sale/priceList";

const version = ref('3.8.1')




// const users = ref([]);
// const fetchUsers =async (visible) =>{
//   if(visible){
//     getUser().then(res=>{
//       users.value = res.sysUserList.map(user => ({
//         id: user.userId,
//         name: user.userName
//       }));
//     })
//   }
// };
//客户

const customers = ref([]);
const fetchCustomer =async (visible) =>{
  if(visible){
    getCustomer().then(res=>{
      customers.value = res.customerList.map(user => ({
        id: user.customerId,
        name: user.customerName
      }));
    })
  }
};
const variants=ref([]);
const getVariants=async (visible)=>{
  if(visible){
    getVariant().then(res=>{
      variants.value=res.productList.map(variant=>({
        id:variant.variantId,
        name:variant.brand+variant.productName+variant.typeName+variant.weight
      }))
    })
  }
}


// 页面的基础

const SalOrder=ref({
  customerId:'',
  shippingAddress:'',
  // userId:'',
  orderDetailList:[
    {  price: '', total: 1 ,variantId:''},
  ]
})




function addProduct() {
  SalOrder.value.orderDetailList.push({  price: '', total: 1 ,variantId:''});
}

function removeProduct(index) {
  SalOrder.value.orderDetailList.splice(index, 1);
}

function submitForm() {
  addOrder(SalOrder.value).then(res=>{
      alert(res.msg)
    SalOrder.value={
      customerId:'',
      shippingAddress:'',
      // userId:'',
      orderDetailList:[
        {  price: '', total: 1 ,variantId:''},
      ]
    }
  })
  console.log(SalOrder.value)
}
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

//AI
.box-card {
  margin-bottom: 20px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
</style>

